<template>
	<div class="main">
<!-- 		<a-card class="footages" title="添加个人素材" @click="insert">
			<img src="../assets/cil-image-plus.svg" style="opacity: 0.3" />
		</a-card> -->
		<a-card class="footages" v-for="item,index in footageList" :span="6" :key="index">
			<div class="addBot" @click="addFootage(item.id)">
				<SelectOutlined />
			</div>
			<div class="downBot" @click="downloadFootage(item)">
				<DownloadOutlined />
			</div>
			<div class="img"><img :src="item.src" /></div>
		</a-card>
		<Modal v-model="showModal" title="请选择" @on-ok="insertImgFile" @on-cancel="showModal = false,imgFile = null ">
			<Upload :before-upload="handleUpload" action="#">
				<Button icon="ios-cloud-upload-outline">选择图片文件</Button>
			</Upload>
			<img class="uploadImg" :src="imgFile" />
			<Input v-model="imgName" placeholder="请输入素材名称"></Input>
		</Modal>
	</div>
</template>
<script>
	import {
		getImgStr
	} from "@/utils/utils";
	import {
		v4 as uuid
	} from 'uuid';
	import {
		SelectOutlined,
		DownloadOutlined
	} from '@ant-design/icons-vue';
	export default {
		name: '推荐素材/rFootage',
		components: {
			SelectOutlined,
			DownloadOutlined
		},
		data() {
			return {
				showModal: false,
				imgFile: '',
				imgName: '',
				footageList: [
					
				]
			}
		},
		methods: {
			initFootage(){
				// console.log("2222")
        this.$http.post(
          '/api/posterEditor/getrfootages/',
            {}
        ).then((res)=>{
          console.log(res)
          for(var item of res.data){
            this.footageList.push({
              id:item.pk,
              name:`素材${item.fields.r_footage_name}`,
              src:'api/'+item.fields.r_footage_src,
              typ:item.fields.r_footage_type,
            })
          }
        })
				// for(var a=1;a<=519;a++){
				// 	console.log(a)
				// 	this.footageList.push({
				// 		id:a,
				// 		name:`素材${a}`,
				// 		src:`./svg/${a}.svg`,
				// 	})

			},
			insert() {
				this.imgFile = ''
				this.showModal = true
			},
			insertImgFile() {
				const imgEl = document.createElement('img');
				imgEl.src = this.imgFile
				// 插入页面
				document.body.appendChild(imgEl);

			},
			// 选择文件
			handleUpload(file) {
				getImgStr(file).then(res => {
					this.imgFile = res
				})
				return false;
			},
			addFootage(id) {
				console.log("添加该id到个人素材");
        this.$http.post(
            'api/posterEditor/addIFootageFromR/',
            {
              token : this.$store.state.token,
              id : id,
            }
        ).then(res => {
          // if (res.data.code === 0){
            confirm(res.data.message)
          // }
        })
			},
			downloadFootage(item) {
				console.log("下载该id的图片");

				const fileUrl = item.src; // 文件的URL地址
				fetch(fileUrl,{mode: 'no-cors'})
					.then(response => response.blob())
					.then(blob => {
						const url = window.URL.createObjectURL(blob);
						const link = document.createElement('a');
						link.href = item.src;
						link.setAttribute('download', item.name);
						document.body.appendChild(link);
						link.click();
					})
					.catch(error => {
						console.error(error);
					});

				// //下载图片地址和图片名
				// var image = new Image();
				// // 解决跨域 Canvas 污染问题
				// image.setAttribute("crossOrigin", "anonymous");
				// image.onload = function() {
				// 	var canvas = document.createElement("canvas");
				// 	canvas.width = image.width;
				// 	canvas.height = image.height;
				// 	var context = canvas.getContext("2d");
				// 	context.drawImage(image, 0, 0, image.width, image.height);
				// 	var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
				// 	var a = document.createElement("a"); // 生成一个a元素
				// 	var event = new MouseEvent("click"); // 创建一个单击事件
				// 	a.download = item.name || "photo"; // 设置图片名称
				// 	a.href = url; // 将生成的URL设置为a.href属性
				// 	a.dispatchEvent(event); // 触发a的单击事件
				// };
				// image.src = "/api/static/2.png";
			},
		},
		mounted() {
			this.initFootage()
		}
	}
</script>
<style>
	.main {
		display: inline-block;
		background-color: rgb(80, 89, 110);
		width: 100%;
		min-height: 100%;
    padding-top: 8px;

  }

	.footages {
		height: 450px;
		text-align: center;
		display: inline-block;
		vertical-align: middle;
		width: 380px;
		/*height: 400px;*/
		margin-left: 5px;
		margin-right: 5px;
		margin-bottom: 15px;
		color: gray;


		.img {
			/*position: fixed;*/
			width: 100%;
			height: 400px;
			margin: auto;

			img {
				margin: auto;
				max-height: 100%;
				max-width: 100%;
				/*width: 100%;*/
				/*height: 100%;*/
			}
		}
	}

	.addBot {
		position: absolute;
		right: 15px;
		top: 15px;
		/* color: #ff0000; */
	}

	.downBot {
		position: absolute;
		right: 15px;
		top: 35px;
	}

	.uploadImg {
		max-height: 200px;
		max-width: 200px;
	}
</style>